<template>
  <div>
    <SuperTable @checkbox-change="checkboxChangeFn" @checkbox-all="checkboxChangeFn" :data-request="fetchData"
      :columns="baseColumns" header-title="已登记样本" pager align="center" border search ref="supertable" :export-config="{}">
      <template #action>
        <Popconfirm :disabled="!state.checkedList.length" :title="`确认补打${state.checkedList.length}条标签吗？`"
          @confirm="printFn">
          <Button :disabled="!state.checkedList.length" type="primary">标签补打</Button>
        </Popconfirm>
      </template>
    </SuperTable>
    <a-drawer v-model:visible="visible" class="custom-class" :width="drawerWidth" placement="right" destroyOnClose>
      <look-over :formState="formState" v-if="showdrawer == 1"></look-over>
      <Check @cancel="cancel" :formState="formState" v-else-if="showdrawer == 2"></Check>
    </a-drawer>
    <!--   【4】分装弹窗   -->
    <IiDivideModal v-model:show-modal="state.showDivideModal" :data="state.curData" @modal-ok="cancel()" />
  </div>
</template>
<script setup lang="tsx">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import { VxeGridPropTypes } from 'vxe-table';
import { ref, reactive } from 'vue';
import lookOver from '../../components/lookOver.vue';
import Check from '../../components/check.vue';
import columns, { TableColumnList } from './columns';
import { useRoute } from 'vue-router';
import { getlistData, ampledetailed } from '../../api/registration_sample';
import { getdetailed2 } from '../../api/takeNotes';
import { message, Button, Modal, Popconfirm } from 'ant-design-vue';
import IiDivideModal from '@/modules/sample-inventory/pages/inventory-inquiry/components/ii-divide-modal.vue';
import dayjs from 'dayjs';
import { printBoxs } from '@/libs/print';
const state = reactive({
  loading: false,
  showViewModal: false,
  showDivideModal: false,
  tableList: [],
  subData: {},
  curData: {},
  showPrintModal: false,
  checkedList: [],
  printData: {
    type: '3',
    count: 1,
  },
});
const route = useRoute();
const isLab = route.path.indexOf('lab') > -1;
const visible = ref<boolean>(false);
const formState = ref();
const showdrawer = ref(1);
const drawerWidth = ref('70%');
let baseColumns: TableColumnList = [
  ...columns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 300,
    actions: ({ row }) => [
      {
        label: '查看',
        onClick: async () => {
          const { result } = await ampledetailed(row.id);
          const res = await getdetailed2(row.specimenId);
          formState.value = Object.assign(res.result, result);
          formState.value.sampleTime = dayjs(formState.value.sampleTime).format('YYYY-MM-DD');
          formState.value.countUnit = formState.value.unit == 1 ? 'ml' : 'μl'
          if (formState.value?.extDataList) {
            formState.value.extDataList.forEach((item) => {
              formState.value[item.key] = item.value;
            });
          }
          drawerWidth.value = '70%';
          visible.value = true;
          showdrawer.value = 1;
        },
      },
      {
        label: '检测',
        onClick: async () => {
          const { result } = await ampledetailed(row.id);
          const res = await getdetailed2(row.specimenId);
          formState.value = Object.assign(res.result, result);
          formState.value.sampleTime = dayjs(formState.value.sampleTime).format('YYYY-MM-DD');
          formState.value.countUnit = formState.value.unit == 1 ? 'ml' : 'μl'
          formState.value.capacity = formState.value.capacity + formState.value.countUnit
          if (formState.value?.extDataList) {
            formState.value.extDataList.forEach((item) => {
              if (item.key == 'specimen_type') {
                formState.value[item.key] = item.value;
              }
            });
          }
          console.log(formState.value, 9887);
          drawerWidth.value = '55%';
          visible.value = true;
          showdrawer.value = 2;
        },
      },
      {
        label: '分装',
        onClick: async () => {
          const { result } = await ampledetailed(row.id);
          const res = await getdetailed2(row.specimenId);
          state.curData = Object.assign(res.result, result);
          state.curData.specimenType = row.specimenType;
          state.curData.sampleTime = result.sampleTime.substring(0, 10);
          state.showDivideModal = true;
        },
      },
    ],
  },
];
if (isLab) {
  baseColumns = columns.slice(2);
}
const supertable = ref<InstanceType<typeof SuperTable>>();

const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let searchData = supertable.value?.getFormModel();
  console.log(searchData.capacity, 6666);
  searchData.isImport = 0
  if (searchData.capacity) {
    if (!Boolean(Number(searchData.capacity))) {
      searchData.capacity = null;
      message.warning('容量只能为纯数字');
    }
  }
  const query = {
    ...searchData,
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
  };
  const { result } = await getlistData(query);
  result.data.forEach(item => {
    if (item?.unit == 1) item.capacity = `${item?.capacity ? item?.capacity : 0}ml`
    if (item?.unit == 2) item.capacity = `${item?.capacity ? item?.capacity : 0}μl`
  })
  return result;
};
// 关闭抽屉
const cancel = () => {
  visible.value = false;
  supertable.value?.refreshTable();
};
const checkboxChangeFn = ({ records }) => {
  state.checkedList = records;
};
//打印
const printFn = async () => {
  printBoxs(state.checkedList);
};
const onClose = () => { };
</script>
<style lang="less" scoped></style>
